<template>
  <div class="doctorsay-c">
    <div class="navImg">
      <div class="box">
        <div class="msg msg1">
          <p>头条精选</p>
          <p>夏季变美大作战</p>
        </div>
        <img src="https://z3.ax1x.com/2021/07/12/WPQSIS.png" alt="" />
      </div>
      <div class="box">
        <div class="msg msg2">
          <p>达人榜</p>
          <p>丁架月领衔达人榜</p>
        </div>
        <img src="https://z3.ax1x.com/2021/07/12/WPMza8.png" alt="" />
      </div>
    </div>
    <!-- 医生评论 -->
    <div class="itemAll">
      <!-- 分割线 -->
      <div class="fenge"></div>
      <!-- 渲染的评论内容 -->
      <div class="item" v-for="(item, index) in newList" :key="index">
        <div class="top">
          <img :src="item.imgUrl" alt="" />
          <div>
            <p>
              {{ item.name }}<span>{{ item.Position }}</span>
            </p>
            <p>{{ item.data }}</p>
          </div>
        </div>

        <div class="content">
          <p>{{ item.title }}</p>
          <p>
            {{ item.content }}
            <span> <a href="#">全文</a></span>
          </p>
        </div>

        <div class="botton">
          <p>
            <span>{{ item.consult }}</span
            >阅读
          </p>
          <div>
            <span class="iconfont icon-dianzan"></span>
            点赞
            <span class="iconfont icon-duihua"></span>
            评论
          </div>
        </div>
      </div>
    </div>
    <p class="last">亲，没有更多了...</p>
  </div>
</template>

<script>
import { getNewApi } from "../../../utils/api";
export default {
  data() {
    return {
      newList: [],
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.getNew();
  },

  methods: {
    async getNew() {
      const res = await getNewApi();
      console.log(res);
      this.newList = res.result[0].doctorsay;
    },
  },
};
</script>
<style lang="less" scoped>
.doctorsay-c {
  overflow: auto;
  position: fixed;
  top: 98px;
  left: 0;
  right: 0;
  bottom: 50px;
  // 图片导航
  .navImg {
    display: flex;
    padding: 0 15px;
    margin-top: 15px;
    .box {
      width: 169px;
      height: 82.5px;
      position: relative;
      .msg {
        position: absolute;
        top: 0;
        margin-left: 5px;
        > :first-child {
          font-size: 24px;
          margin: 0;
          margin-top: 15px;
          font-weight: 900;
        }
        > :last-child {
          font-size: 14px;
          margin: 0;
        }
      }
      .msg1 {
        color: #7baeeb;
      }
      .msg2 {
        color: #febe4e;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    > :last-child {
      margin-left: 8.5px;
    }
  }
  .itemAll {
    margin-top: 15px;
    .fenge {
      width: 100%;
      height: 10px;
      background: #f4f5f9;
    }
    .item {
      width: 340px;
      height: 190px;
      padding: 0 16px;
      .top {
        display: flex;
        img {
          width: 45px;
          height: 45px;
          margin-top: 10px;
          border-radius: 50%;
        }
        div {
          margin-left: 15px;
          > :first-child {
            font-weight: 900;
            font-size: 16px;
            margin: 0;
            margin-top: 10px;
            span {
              font-size: 12px;
              font-weight: 400;
              color: #787878;
              margin-left: 10px;
            }
          }
          > :last-child {
            font-size: 12px;
            font-weight: 400;
            color: #858383;
            margin: 0;
            margin-top: 8px;
          }
        }
      }
      .content {
        > :first-child {
          font-weight: 900;
          font-size: 18.5px;
        }
        > :last-child {
          font-size: 12.5px;
          color: #666;
          a {
            color: rgb(51, 139, 197);
          }
        }
      }
      .botton {
        // display: flex;
        color: #666;
        p {
          width: 100px;
          margin: 0;
          font-size: 12px;
          float: left;
        }
        div {
          float: right;
          font-size: 12px;
        }
      }
    }
  }
}
.last {
  text-align: center;
  margin-bottom: 50px;
  font-size: 16px;
  color: #ccc;
}
</style>
